<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }
        header {
            width: 800px;
            height: 100px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
        }

        div {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <header>
        <script>
            function getRandomColor(option = true) {
                if (option) {
                    // 生成 #f0f0f0 十六进制形式的颜色
                    let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
                    // 声明一个变量保存颜色值
                    let color = '#'
                    for (let i = 0; i < 6; i++) {
                        // 生成0-15的随机数 作为需要访问的数字索引
                        let index = Math.floor(Math.random() * (15 - 0 + 1)) + 0
                        color += arr[index]
                    }
                    console.log(color)
                    return color
                } else {
                    //生成rgb(200,255,76) 三原色形式
                    let red = Math.floor(Math.random() * (255 - 0 + 1)) + 0
                    let green = Math.floor(Math.random() * (255 - 0 + 1)) + 0
                    let blue = Math.floor(Math.random() * (255 - 0 + 1)) + 0

                    return `rgb(${red},${green},${blue}) `
                }
            }
            getRandomColor()

        </script>
        <script>
            for (let i = 0; i < 8; i++) {
                document.write(`<div style = "background-color: ${getRandomColor()}"></div>`)
            }
            for (let i = 0; i < 8; i++) {
                document.write(`<div style = "background-color: ${getRandomColor(false)}"></div>`)
            }
        </script>
    </header>

</body>

</html>